<script setup lang="ts">
import { useIcon } from '@/hooks/web/useIcon'
import { propTypes } from '@/utils/propTypes'
import { useI18n } from '@/hooks/web/useI18n'
import SearchIcon from '@/assets/svgs/search.svg'
import RefreshIcon from '@/assets/svgs/reset.svg'
// import ArrowUpIcon from '@/assets/icons/arrow-up.svg'
// import ArrowDownIcon from '@/assets/icons/arrow-down.svg'
const emit = defineEmits(['search', 'reset', 'expand'])

const { t } = useI18n()

defineProps({
  showSearch: propTypes.bool.def(true),
  showReset: propTypes.bool.def(true),
  showExpand: propTypes.bool.def(false),
  visible: propTypes.bool.def(true),
  searchLoading: propTypes.bool.def(false),
  resetLoading: propTypes.bool.def(false)
})

const onSearch = () => {
  emit('search')
}

const onReset = () => {
  emit('reset')
}

const onExpand = () => {
  emit('expand')
}
</script>

<template>
  <div class="flex">
  <BaseButton
    v-if="showSearch"
    type="primary"
    class="search-btn"
    :loading="searchLoading"

    @click="onSearch"
  >
    <img :src="SearchIcon" alt="search" class="btn-icon" />
    查询
  </BaseButton>
  <BaseButton
    v-if="showReset"
    :loading="resetLoading"
    plain
    class="reset-btn"

    @click="onReset"
  >
    <img :src="RefreshIcon" alt="search" class="btn-icon " />
  </BaseButton>
  </div>
  <!-- <BaseButton
    v-if="showExpand"
    :icon="useIcon({ icon: visible ? 'vi-ep:arrow-up' : 'vi-ep:arrow-down' })"
    text
    @click="onExpand"
  >
    {{ t(visible ? 'common.shrink' : 'common.expand') }}
  </BaseButton> -->
</template>
<style lang="less" scoped>


.search-btn {
  width: 78px;
  height: 36px;
  border-radius: 4px 4px 4px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.reset-btn {
  width: 36px;
  height: 36px;
  background: #f4f4f4;
  border-radius: 4px 4px 4px 4px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

// 保持原有样式兼容性
.search-btn .el-icon {
  font-size: 16px !important;
}

.reset-btn .el-icon {
  width: 20px !important;
  height: 16.8px !important;
}
</style>
